<template>
    <div class="listDiv">
        <div class="searchDiv">
            <el-select v-model="obj.req.borrowstate" placeholder="出借状态" class="search_select" clearable>
                <el-option v-for="(item,index) in globalData.borrowStateList" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <el-select v-model="obj.req.repairstate" placeholder="维修状态" class="search_select" clearable>
                <el-option v-for="(item,index) in globalData.repairStateList" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <el-input clearable placeholder="匹配编号/名称" v-model="obj.req.key" class="search_key" />
            <span class="btn search" @click="init">搜索</span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
            <span class="btn download" @click="export_"></span>
            <div class="searchRight">
                <span class="btn add" @click="add">添加资产</span>
            </div>
        </div>
        <div class="table_box"><div class="table_" id="tb">
            <ul class="head">
                <li class="">资产编号</li>
                <li class="mw300">资产信息</li>
                <li class="wcen">资产价值</li>
                <li class="wcen">资产种类</li>
                <li class="wcen">折旧率</li>
                <li class="wcen">出借状态</li>
                <li class="wcen">维修状态</li>
                <li class="mw400  wcen">操作</li>
            </ul>
            <div class="body">
                <ul v-for="x in obj.ary" :key="x">
                    <li class="">{{x.code}}</li>
                    <li class="mw300">
                        <el-tooltip class="box-item" effect="dark" :content="x.name" placement="top-start" :disabled="x.name.length<17">
                            <div class="lineOne pointer">{{x.name}}</div>
                        </el-tooltip>
                    </li>
                    <li class="wcen">￥{{x.price}}</li>
                    <li class="wcen">{{x.type}}</li>
                    <li class="wcen">{{fix(x)}}%</li>
                    <li class="wcen">
                        <div :class="[proxy.$utils.find(globalData.borrowStateList, x.borrowstate, 'label')]">{{proxy.$utils.find(globalData.borrowStateList, x.borrowstate)}}</div>
                    </li>
                    <li class="wcen">
                        <div :class="[proxy.$utils.find(globalData.repairStateList, x.repairstate, 'label')]">{{proxy.$utils.find(globalData.repairStateList, x.repairstate)}}</div>
                    </li>
                    <li class="mw400  wcen">
                        <el-button class="edit_btn" type="success" @click="edit(x)">修改</el-button>
                        <el-button class="read_btn" type="primary"  @click="borrow(x)">出借</el-button>
                        <el-button class="read_btn mr10" type="primary"  @click="repair(x)">维修</el-button>
                        <DelConfirm class="" @yesClick="del(x)" />
                    </li>
                </ul>
            </div>
        </div>
        </div><Pager :value="obj.req" :init="init" />

        <el-dialog v-model="obj.drawer.design" :title="obj.drawer.designTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <router-view @close="obj.drawer.design = false" @init="init" />
        </el-dialog>
        <el-dialog v-model="obj.drawer.borrow" :title="obj.drawer.borrowTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <Borrow :assets_id="obj.assets_id" />
        </el-dialog>
        <el-dialog v-model="obj.drawer.repair" :title="obj.drawer.repairTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <Repair :assets_id="obj.assets_id" />
        </el-dialog>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed } from 'vue'
    import Pager from '@/components/pager.vue'
    import DelConfirm from '@/components/del_confirm.vue'
    import Borrow from './borrow_list.vue'
    import Repair from './repair_list.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        assets_id:0,
        drawer: {
            design: false,
            designTitle: "",
            borrow: false,
            borrowTitle: "",
            repair: false,
            repairTitle: ""
        },
        ary: [],
        req: {
            currentpage: 1,
            pagesize: 10,
            count: 0,
            key: "",
            borrowstate:"",
            repairstate:"",
        }
    });
    let init = () => {
        proxy.$ajax({
            url: '/assets/list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

    let fix = computed(() => {
        return x => {
            let a = x.price * parseFloat(x.depreciation) / 100 / 365 //每日折旧多少钱
            let b = (new Date().getTime() - new Date(x.buytime)) /1000 / (24 * 60 * 60) //从购置那天到现在有几天
            return (100 - (a * b) / x.price * 100).toFixed(2) //a*b是折掉了多少钱，这份钱/x.price，就是占多少比例，再拿100去减，得出现在还剩多少
        }
    })

    let editId = ref(0)
    provide("id", editId); //不能加.value
    let add = () => {
        obj.drawer.design = true
        obj.drawer.designTitle = "添加资产"
        editId.value = 0;
    }
    let edit = x => {
        obj.drawer.design = true
        obj.drawer.designTitle = "修改资产"
        editId.value = x.assets_id;
    }

    let borrow = x => {
        obj.drawer.borrow = true
        obj.drawer.borrowTitle = `${x.name} 出借记录`
        obj.assets_id = x.assets_id;
    }
    let repair = x => {
        obj.drawer.repair = true
        obj.drawer.repairTitle = `${x.name} 维修记录`
        obj.assets_id = x.assets_id;
    }

    let del = x => {
        proxy.$ajax({
            url: '/assets/delete',
            data: { assets_id: x.assets_id },
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                proxy.elMessageMixin("删除成功", "success")
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
</script>

<style scoped>
    ::-webkit-scrollbar { width:10px; background-color: #FFFFFF; }
    .search_select { width:100px!important; }
    .search_key { width:160px!important; }
    #tb ul li.li1 { width: 100px; }
    #tb ul li.li3 { width: 75px; }
    #tb ul li.li4 { width: 85px; }
    #tb ul li.li5 { width: 70px; }
    #tb ul li.li6 { width: 60px; }
    #tb ul li.li7 { width: 60px; }
    #tb ul li.li8 { width: 250px; }
</style>